<template>
  <div class="attend_detail">
    <div class="attend_detail_left">
      <div class="info_detail_title">
        <el-button type="warning" size="mini" @click="backForm" v-if="detailInfo.saveStatus === '1'">退 回</el-button>
        <div class="title_name">{{ detailInfo.overtimeTitle }}</div>
        <div class="title_org">部门：{{ detailInfo.orgName }}</div>
      </div>
      <div class="right_box">
        <div class="attend_main">
          <div class="table_con" ref="table_con">
            <vxe-table
              border
              stripe
              class="mytable-scrollbar"
              highlight-hover-row
              size="medium"
              height="100%"
              :data="tableData"
              align="center"
              v-if="!load"
              @cell-click="cellClick"
              :empty-text="emptyText">
              <vxe-table-column field="userName" title="姓名"></vxe-table-column>
              <vxe-table-column field="overtimeDay" title="加班日期"></vxe-table-column>
              <vxe-table-column field="overWorkTime" title="加班时间"></vxe-table-column>
              <!-- <vxe-table-column field="punchTime" title="打卡时间"></vxe-table-column> -->
              <vxe-table-column title="补助标准" width="200">
                <template #default="{ row }">
                  <el-radio-group v-model="row.subsidyStandard" @input="onChange(row)">
                    <el-radio label="1">一餐</el-radio>
                    <el-radio label="2">两餐</el-radio>
                  </el-radio-group>
                </template>
              </vxe-table-column>
              <vxe-table-column title="备注" width="140">
                <template #default="{ row }">
                  {{ row.remark }}
                </template>
              </vxe-table-column>
            </vxe-table>
          </div>
        </div>
      </div>
    </div>
    <XnDialog
      title="退回原因"
      :visible.sync="backDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      class="branch_dialog"
      @closed="backDiaShow = false"
      width="700px">
      <el-input
        placeholder="请输入退回原因"
        v-model="bakcReason"
        maxlength="30"
        show-word-limit
        type="textarea"></el-input>
      <div class="btn_save">
        <el-button size="small" @click="backDiaShow = false">取消</el-button>
        <el-button size="small" class="btnBg" type="primary" @click="submit">确定</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import {
  getWeekendDutySubsidyDetail,
  updateSubsidyStandard,
  exportSubsidyConfirm,
  returnWeekendDuty,
} from '@apis/api-dailyManage.js'
import moment from 'moment'
import XnDialog from '@com/xnDialog.vue'
export default {
  components: { XnDialog },
  props: {
    firstType: {
      type: String,
      default: '',
    },
    activeInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      moment: moment,
      applyType: '1',
      timeNow: moment().format('YYYY-MM-DD'),
      model: '',
      reason: '',
      detail: {},
      detailInfo: {},
      dialogShow: false,
      suggest: '',
      tableData: [],
      load: false,
      emptyText: '暂无数据',
      backDiaShow: false,
      bakcReason: '',
    }
  },
  watch: {
    activeInfo: {
      handler(news) {
        if (news.id) {
          this.emptyText = this.activeInfo.saveStatus === '1' ? '无人员补助' : '暂无确认'
          this.detail = news
          this.getWeekendDutySubsidyDetail()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    FilterPerSon(val) {
      return 'aaa'
    },
  },
  created() {},
  mounted() {},
  methods: {
    getWeekendDutySubsidyDetail() {
      getWeekendDutySubsidyDetail({
        id: this.detail.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          this.tableData = res.data.itemDetailList || []
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ['time']
      const cellValue = row[column.property]
      // if (cellValue && fields.includes(column.property)) {
      if (fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    cellClick({ row, column }) {},
    onChange(row) {
      let str = ''
      if (row.punchTime.indexOf('()') !== -1) {
        const arr = row.punchTime.split('(')
        const arr1 = arr[1].split('h')
        if (row.subsidyStandard === '1' && Number(arr1[0]) >= 8) {
          str = '一半调休，一半补助'
        }
      }
      row.remark = str
      updateSubsidyStandard({
        id: row.id,
        subsidyStandard: row.subsidyStandard,
        remark: row.remark,
      }).then(res => {})
    },
    exportData(data) {
      console.log(data)
      if (!this.tableData.length) return
      const req = `?month=${data.month}&year=${data.year}&saveStatus=${data.saveStatus}&tenantId=${localStorage.pskh_tenantId}`
      const link = document.createElement('a')
      link.target = 'targetName'
      link.href = exportSubsidyConfirm(req)
      link.click()
      link.remove()
    },
    backForm() {
      this.bakcReason = ''
      this.backDiaShow = true
    },
    submit() {
      if (!this.bakcReason) {
        return this.$message.warning('请填写退回原因')
      }
      returnWeekendDuty({
        id: this.detailInfo.id,
        returnReason: this.bakcReason,
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('退回成功')
          this.backDiaShow = false
          this.$emit('review')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_detail {
  height: 100%;
  font-size: 16px;
  display: flex;
  .attend_detail_left {
    height: 100%;
    width: 100%;
  }
  .info_detail_title {
    font-weight: 400;
    padding-left: 20px;
    position: relative;
    // text-align: center;
    .title_name {
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
    }
    .title_org {
      font-weight: 600;
    }
    .el-button {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }
  .right_box {
    height: calc(100% - 100px);
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    .attend_main {
      width: 100%;
      padding: 0 20px;
      height: calc(100% - 60px);
      margin: 0 auto;
      flex: 1;
    }
    .table_con {
      height: 100%;
      /deep/.vxe-cell--edit-icon {
        display: none;
      }
      /deep/.el-radio-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .btn_check {
      margin-top: 10px;
      margin-right: 10px;
      text-align: center;
    }
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
}
.branch_dialog {
  /deep/.el-dialog__body {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0;
    .el-radio {
      margin-right: 20px;
    }
    .el-textarea {
      margin: 0 0 20px;
    }
    .btn_save {
      text-align: right;
    }
  }
}
</style>
